import 'package:flutter/material.dart';

class MyOrdersPage extends StatelessWidget {
  const MyOrdersPage({super.key});

  @override
  Widget build(BuildContext context) {
    // Scaffold 是 Flutter 页面的基础布局结构，提供了 AppBar、Body 等
    return Scaffold(
      // 1. 顶部 AppBar
      appBar: AppBar(
        // AppBar 的标题
        title: const Text(
          '我的订单',
          style: TextStyle(
            color: Colors.black87,
            fontWeight: FontWeight.w600,
          ),
        ),
        // AppBar 的背景色
        backgroundColor: Colors.white,
        // 去掉 AppBar 底部的阴影
        elevation: 0,
        // 左侧的返回按钮 (Flutter 会自动处理返回逻辑)
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black87),
          onPressed: () {
            // 此处仅为UI展示，实际项目中可通过 Navigator.pop(context) 返回
          },
        ),
      ),

      // 2. 页面主体内容
      body: SingleChildScrollView(
        // 防止键盘弹出时溢出
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 3. 状态标签栏
              const _OrderStatusTabs(),
              const SizedBox(height: 16),

              // 4. 订单列表
              Column(
                children: const [
                  // 订单卡片 1: 待发货
                  _OrderCard(
                    orderNumber: '2023092412345678',
                    orderDate: '2023-09-24 15:30',
                    status: '待发货',
                    statusColor: Colors.orange,
                    items: [
                      _OrderItem(
                        imageUrl: 'https://picsum.photos/seed/phone1/80/80',
                        name: '超级智能手机 Pro Max 256GB 暗夜黑',
                        price: '¥ 5,999.00',
                        quantity: 1,
                      ),
                    ],
                    totalAmount: '¥ 5,999.00',
                    actionText: '联系客服',
                  ),
                  SizedBox(height: 12),

                  // 订单卡片 2: 待收货
                  _OrderCard(
                    orderNumber: '2023092087654321',
                    orderDate: '2023-09-20 10:15',
                    status: '待收货',
                    statusColor: Colors.lightBlue,
                    items: [
                      _OrderItem(
                        imageUrl: 'https://picsum.photos/seed/laptop1/80/80',
                        name: '超薄笔记本电脑 Air 13.3英寸 银色',
                        price: '¥ 7,499.00',
                        quantity: 1,
                      ),
                      _OrderItem(
                        imageUrl: 'https://picsum.photos/seed/mouse1/80/80',
                        name: '无线蓝牙鼠标 白色',
                        price: '¥ 299.00',
                        quantity: 1,
                      ),
                    ],
                    totalAmount: '¥ 7,798.00',
                    actionText: '查看物流',
                  ),
                  SizedBox(height: 12),

                  // 订单卡片 3: 已完成
                  _OrderCard(
                    orderNumber: '2023091598765432',
                    orderDate: '2023-09-15 09:45',
                    status: '已完成',
                    statusColor: Colors.green,
                    items: [
                      _OrderItem(
                        imageUrl: 'https://picsum.photos/seed/book1/80/80',
                        name: 'Flutter 从入门到精通 (第二版)',
                        price: '¥ 89.00',
                        quantity: 2,
                      ),
                    ],
                    totalAmount: '¥ 178.00',
                    actionText: '查看评价',
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// --- 以下为页面中用到的私有组件 ---

/// 订单状态标签栏组件
class _OrderStatusTabs extends StatelessWidget {
  const _OrderStatusTabs();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 36,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _buildTab('全部', true),
          _buildTab('待付款', false),
          _buildTab('待发货', false),
          _buildTab('待收货', false),
          _buildTab('已完成', false),
          _buildTab('已取消', false),
        ],
      ),
    );
  }

  Widget _buildTab(String text, bool isActive) {
    return Container(
      margin: const EdgeInsets.only(right: 12),
      padding: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
        color: isActive ? Colors.blue : Colors.grey[100],
        borderRadius: BorderRadius.circular(18),
      ),
      child: Center(
        child: Text(
          text,
          style: TextStyle(
            color: isActive ? Colors.white : Colors.black87,
            fontSize: 14,
          ),
        ),
      ),
    );
  }
}

/// 单个订单卡片组件
class _OrderCard extends StatelessWidget {
  final String orderNumber;
  final String orderDate;
  final String status;
  final Color statusColor;
  final List<_OrderItem> items;
  final String totalAmount;
  final String actionText;

  const _OrderCard({
    required this.orderNumber,
    required this.orderDate,
    required this.status,
    required this.statusColor,
    required this.items,
    required this.totalAmount,
    required this.actionText,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.shade100,
            blurRadius: 4,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        children: [
          // 订单头部信息
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '订单号: $orderNumber',
                      style: const TextStyle(fontSize: 12, color: Colors.grey),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      orderDate,
                      style: const TextStyle(fontSize: 12, color: Colors.grey),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    color: statusColor.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    status,
                    style: TextStyle(
                      color: statusColor,
                      fontSize: 12,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ],
            ),
          ),

          // 订单商品列表
          Column(
            children: items,
          ),

          // 订单底部信息
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '合计: $totalAmount',
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.black87,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    // 此处仅为UI展示
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    foregroundColor: Colors.blue,
                    side: const BorderSide(color: Colors.blue),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(4),
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    minimumSize: const Size(80, 32),
                  ),
                  child: Text(
                    actionText,
                    style: const TextStyle(fontSize: 14),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 订单中的单个商品项组件
class _OrderItem extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String price;
  final int quantity;

  const _OrderItem({
    required this.imageUrl,
    required this.name,
    required this.price,
    required this.quantity,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: Row(
        children: [
          // 商品图片
          ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Image.network(
              imageUrl,
              width: 80,
              height: 80,
              fit: BoxFit.cover,
            ),
          ),
          const SizedBox(width: 12),

          // 商品信息
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  name,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.black87,
                    fontWeight: FontWeight.w500,
                  ),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                ),
                const SizedBox(height: 4),
                Text(
                  price,
                  style: const TextStyle(
                    fontSize: 14,
                    color: Colors.black87,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),

          // 商品数量
          Text(
            'x$quantity',
            style: const TextStyle(fontSize: 14, color: Colors.grey),
          ),
        ],
      ),
    );
  }
}